<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
				font-family: "微软雅黑";
				list-style-type: none;
			}
			#big{
				background-image: url(imgs/bg.jpg);
			}
			#words{
				margin: 0 auto;
				min-width: 600px;
				max-width: 800px;
				height: 930px;
				background-image: url(imgs/middle.jpg);
			}
			#words ul{
				width: 630px;
				margin: 0 auto;
				height: 800px;
			}
			#words li{
				width: 200px;
				float: left;
				border: 1px solid gray;
				padding-top: 15px;
				padding-bottom: 15px;
				background-color: #a8a598;
				position: relative;
			}
			
			#words span{
				position: absolute;
				bottom: 10px;
				right: 5px;
				color: red;
				font-size: 5px;
				display: block;
				padding: 3px;
				font-style: italic;
			}
			#words  li img{
				padding: 4px;
				margin: 0 auto;
				border: 1px solid white;
				display: block;
			}
			#words div{
				padding: 10px 5px 10px 5px;
			}
			#words p{
				color: white;
				font-size: 16px;
				padding-top: 10px;
			}
			#words h2{
				border: 3px solid green;
				color: floralwhite;
				font-size: 15px;
				font-family: "宋体";
				width: 675px;
				height: 70px;
				display: block;
				background-color: #b6d8c2;
				margin: 20px 25px 20px 25px;
				padding-top: 8px;
				padding-left: 4px;
				margin: 0 auto;
				margin-bottom: 35px;
				margin-top: 25px;
				
			}
			
			#footer{
				background-image: url(imgs/middle.jpg);
				color: white;
				font-size: 8px;
				border-top: 1px solid white;
				text-align: center;
				height: 30px;
				line-height: 30px;
			}
			#words .l2{
				margin-left: 10px;
				margin-right: 10px;
			}
			#words .fengkai{
				
				
			}
			
			
			
			
			
			 
		</style>
	</head>
	<body>
		<div id="big">
			
		
		<div id="words">
			<img src="imgs/logo.png"/>
			<h2>这是一个网页作品的展示空间，每个人都可以上传自己设计的网页作品供大家学习和分享。在这里你可以看到很多富有独特创意的网页设计，它们不拘泥于现有的设计模式，敢于创新，敢于追求自己向往的设计理念。如果你也有这样的设计冲动，请不要犹豫，赶紧加入我们吧！每周这里会定期更新小伙伴们提交的新作品，期待你的参与哦！</h2>
				<ul>
					<li >
						<img src="imgs/pic1.jpg"/>
						<div>
						    <span>2.2万人点赞</span>
						    <h4>1号作品  个人主页</h4>
					    	<p>杨帆</p>
						</div>
						</li>
						<li class="l2">
							<img src="imgs/pic2.jpg" />
							<div >
								<span>2万人点赞</span>
								<h4>2号作品  音乐网站首页</h4>
								<p>李明哲</p>
							</div>
						</li>
						<li >
							<img src="imgs/pic3.jpg"/>
							<div >
								<span>1.2万人点赞</span>
								<h4>3号作品  电商网站首页</h4>
								<p>周小宁</p>
							</div>
						</li>
						<li class="fengkai">
							<img src="imgs/pic4.jpg"/>
							<div>
								<span>3.2万人点赞</span>
								<h4>4号作品  新闻网站首页</h4>
								<p>王芳 </p>
							</div>
						</li>
						<li class="l2 fengkai">
							<img src="imgs/pic5.jpg"/>
							<div>
								<span>2.6万人点赞</span>
								<h4>5号作品  社团网站首页</h4>
								<p>钟楚芳</p>
							</div>
						</li>
						<li lass="fengkai"> 
							<img src="imgs/pic6.jpg"/>
							<div>
								<span>2.1万人点赞</span>
								<h4>6号作品  个人作品主页</h4>
								<p>卢英</p>
							</div>
						</li>
						<li>
							<img src="imgs/pic7.jpg"/>
							<div>
								<span>2万人点赞</span>
								<h4>7号作品  设计网站首页</h4>
								<p>涂明</p>
							</div>
						</li>
						<li class="l2">
							<img src="imgs/pic8.jpg"/>
							<div >
								<span>5万人点赞</span>
								<h4>8号作品  个人主页</h4>
								<p>周静珊</p>
							</div>
						</li>
						<li>
							<img src="imgs/pic9.jpg"/>
							<div >
								<span>1万人点赞</span>
								<h4>9号作品  游戏网站首页</h4>
								<p>杨天明</p>
							</div>
						</li>
					</ul>
		</div>
		</div>
		<div id="footer">版权所有@东莞职业技术学院，2014</div>
	</body>
</html>
		
		